
export class Bubble {
    constructor(context) {
        this.context = context;
    }
    drawBubble(text, x, y, maxWidth) {
        
        this.context.fillStyle = 'white';
        this.context.strokeStyle = 'black';
        this.context.lineWidth = 1;  //边框宽度

        // 计算文本宽度
        this.context.font = '16px Arial';
        const textWidth = this.context.measureText(text).width;

        // 计算气泡宽度和高度
        const bubbleWidth = Math.min(maxWidth, textWidth + 20);
        const bubbleHeight = bubbleWidth * 2 / 3;

        // 绘制气泡主体
        this.context.beginPath();
        this.context.moveTo(x, y);
        this.context.lineTo(x + bubbleWidth / 6, y - bubbleHeight / 4);
        this.context.arc(x + bubbleWidth / 6, y - bubbleHeight / 2, bubbleHeight / 4, 0.5 * Math.PI, 1.5 * Math.PI);
        this.context.arc(x + bubbleWidth / 3, y - bubbleHeight * 3 / 4, bubbleHeight / 4, 1 * Math.PI, 2 * Math.PI);
        this.context.arc(x + bubbleWidth * 2 / 3, y - bubbleHeight * 3 / 4, bubbleHeight / 4, 1 * Math.PI, 2 * Math.PI);
        this.context.arc(x + bubbleWidth * 5 / 6, y - bubbleHeight / 2, bubbleHeight / 4, 1.5 * Math.PI, 0.5 * Math.PI);
        this.context.arc(x + bubbleWidth * 2 / 3, y - bubbleHeight / 4, bubbleHeight / 4, 0 * Math.PI, 1 * Math.PI);
        this.context.arc(x + bubbleWidth / 3, y - bubbleHeight / 4, bubbleHeight / 4, 0 * Math.PI, 0.85 * Math.PI);

        this.context.closePath();

        this.context.fill();
        this.context.stroke();

        // 绘制文本
        this.context.fillStyle = 'black';
        this.context.textAlign = 'center';
        this.context.fillText(text, x + bubbleWidth / 2, y - bubbleHeight / 2 + 4);
    }
}